<template>
  <div class="aside">
    <div style="width: 100%;height: 70px;background-color: #fff!important;">
      <img src="../../assets/logo2.png" alt="" style="width: 100%;height: 100%;">
    </div>
    <div style="width: 100%;height: 100px;padding: 10px 10px 10px 20px;">
      <el-dropdown @command="handleCommand" trigger="click" style="cursor: pointer;">
          <span class="el-dropdown-link" style="width: 30%;float: left;">
            <img src="../../assets/toux.png" alt="">
          </span>
       <div style="float: right;width: 70%;padding: 3px 0 0 15px;">
         <!--<span style="color: rgba(0,0,0,1);font-weight: 600;">{{$store.state.userName}} </span>-->
         <span style="color: rgba(0,0,0,1);font-weight: 600;word-break:normal;display:block;white-space:pre-wrap;overflow:hidden;">{{$store.state.userName}} </span>
         <span style="color: rgba(0,0,0,1);font-weight: 600;">管理员</span>
       </div>

        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item  command="b">
            退出登录
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-row class="tac">
      <el-col :span="24">
        <ul style="width: 200px;z-index: 10001">
          <li class="unChecked" >
            <div @click="carLiClick(0)"><span :class="sonShow[0]?'checkSpan':''" ><i  class="iconfont icon-qiaquan" style="margin-right: 20px;"></i>卡券中心</span></div>
            <div class="li_son" :style="sonShow[0]?'height: 100px;transition: .5s;':'height:0;overflow: hidden;transition: .5s;'">
              <ul>
                <li @click="sonLiClick(0)" :class="sonLiFontColor[0]?'lan':''">卡券列表</li>
                <li @click="sonLiClick(1)" :class="sonLiFontColor[1]?'lan':''">投放记录</li>
              </ul>
            </div>
          </li>
          <li class="unChecked" >
            <div @click="carLiClick(1)"> <span :class="sonShow[1]?'checkSpan':''" ><i  class="iconfont icon-guanwangicon-" style="margin-right: 20px;"></i>商家推广</span></div>
            <div class="li_son" :style="sonShow[1]?'height: 50px;transition: .5s;':'height: 0; overflow: hidden;transition: .5s;'">
              <ul>
                <li @click="sonLiClick(3)" :class="sonLiFontColor[3]?'lan':''">推广列表</li>
                <!--<li>投放记录</li>-->
              </ul>
            </div>
          </li>
          <li class="unChecked">
          <div @click="carLiClick(2)" ><span :class="sonShow[2]?'checkSpan':''" ><i  class="iconfont icon-guanli" style="margin-right: 20px;"></i>商家管理</span></div>
          <div class="li_son" :style="sonShow[2]?'height: 100px;transition: .5s;':'height: 0; overflow: hidden;transition: .5s;'">
            <ul>
              <li @click="sonLiClick(2)" :class="sonLiFontColor[2]?'lan':''">商家列表</li>
              <li @click="sonLiClick(5)" :class="sonLiFontColor[5]?'lan':''">推荐商家</li>
            </ul>
          </div>
        </li>
          <li class="unChecked">
            <div @click="carLiClick(3)" ><span :class="sonShow[3]?'checkSpan':''" ><i  class="iconfont icon-guanggao" style="margin-right: 20px;"></i>广告管理</span></div>
            <div class="li_son" :style="sonShow[3]?'height: 100px;transition: .5s;':'height: 0; overflow: hidden;transition: .5s;'">
              <ul>
                <li @click="sonLiClick(4)" :class="sonLiFontColor[4]?'lan':''">广告列表</li>
              </ul>
            </div>
          </li>
        </ul>
      </el-col>
    </el-row>
    <el-dialog style="text-align: center;"
               :visible.sync="dialogVisibleTC"
               size="tiny"
               :modal="false"
    :close-on-click-modal="false">
      <div>你确认退出后台系统</div>
      <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogVisibleTC1" class="dialog_qd" id="queding">取 消</el-button>
      <el-button type="primary" @click="systemTC" class="dialog_qd" id="queding">确 定</el-button>
  </span>
    </el-dialog>
    <div class="mask" v-if="dialogVisible">

    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    data(){
      return {
        isCollapse: true,
        dialogVisibleTC:false,
        asideBg:require('../../assets/aside_bg.png'),
        sonShow:[false,false,false,false,false],
        sonLiFontColor:[false,false,false,false,false,false],
        dialogVisible:false,
      }
    },

    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      carLiClick(val){
        for (let i=0;i<this.sonShow.length;i++){
            if(val==i){
              this.$set(this.sonShow,i,!this.sonShow[i])
            }else {
              this.$set(this.sonShow,i,false)
            }
        }
      },
      systemTC(){
        this.dialogVisibleTC = false;
        this.dialogVisible =  false;
        this.$router.push({path: `/login`})
      },
      query_coupon(){

      },
      handleCommand(command) {
        if (command=='b'){//退出登录
          this.dialogVisibleTC = true;
          this.dialogVisible =  true;
        }
      },
      dialogVisibleTC1(){
        this.dialogVisibleTC = false;
        this.dialogVisible =  false;
      },
      sonLiClick(val){
        if(val==0) this.$router.push({path: `/cardCouponsList`})
        if(val==1) this.$router.push({path: `/record`})
        if(val==2) this.$router.push({path: `/storeList`})
        if(val==3) this.$router.push({path: `/storePromotionList`})
        if(val==4) this.$router.push({path: `/advertList`})
        if(val==5) this.$router.push({path: `/recommendStoreList`})
        for (let i=0;i<this.sonLiFontColor.length;i++){
          if(val==i){
            this.$set(this.sonLiFontColor,i,true)
          }else {
            this.$set(this.sonLiFontColor,i,false)
          }
        }
      }
    },
    created(){
      let MC_data = localStorage.getItem('MC_storeData')
      MC_data = JSON.parse(MC_data)
      this.$store.state.storeId =  MC_data.storeId
      this.$store.state.userName =  MC_data.userName
    }
  }
</script>
<style scoped>
  .aside {
    position: absolute;
    width: 200px;
    height: 100%;
    z-index: 2;
    background: #fff;
  }

  .aside .unChecked {
    width: 100%;
    /*height: 50px;*/
    line-height: 50px;
    text-align: center;
    color:rgba(89,115,128,1);
    cursor: pointer;
    /*font-weight: bolder;*/
    font-size: 18px;
    z-index: 100;
  }
  .aside .look{

  }
  .aside .noLook{

  }
  .aside .unChecked span{
    width:100%;
    height: 100%;
    display: inline-block;
    z-index: 4;
  }
  .aside .unChecked .lan{
    color: rgba(87,189,222,1);
  }
  .aside .unChecked .li_son{
    z-index: 101;
    font-size: 15px;
    color:rgba(89,115,128,1);
  }
  .aside .unChecked .li_son:hover{
    background-color: #fff;
  }
  .aside .unChecked .li_son{
    z-index: 5000;
  }
  .aside .unChecked .li_son ul li{
    padding-left: 25px;
  }
  .aside .unChecked .checkSpan{
    color: #fff;
    background: url("../../assets/aside_bg.png");
  }
  .aside .unChecked span:hover {
    color: #fff;
    background: url("../../assets/aside_bg.png");
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }

  .el-submenu .el-menu-item:hover, .el-submenu__title:hover {
    background-color: #d1dbe5;
    color: #C7495C;
  }

  .el-menu {
    border-radius: 2px;
    list-style: none;
    position: relative;
    margin: 0;
    padding-left: 0;
    background-color: #fff;
  }

  .el-submenu .el-menu-item:hover, .el-submenu__title:hover {
    background-color: #C7495C;
    color: #fff;
  }

  /*.el-submenu .el-menu {*/
  /*background-color: #fff;*/
  /*}*/

</style>
